<!doctype html>
<html lang="en">
	<head>
		<!-- Required meta tags -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="./css/bootstrap/bootstrap.min.css">
		<!--引入字体样式-->
		<link rel="stylesheet" href="./css/fontawesome/all.min.css">
		<title>简易购</title>
	</head>
	<body>
		<!-- 导航条-->
		<div class="container-fluid">
			<nav class="navbar navbar-expand-lg navbar-light bg-light">
				<div class="container">
					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
					 aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
						<span class="navbar-toggler-icon"></span>
					</button>
					<span class="navbar-text text-dark">
						简易购欢迎您！ 请
					</span>
					<div class="collapse navbar-collapse" id="navbarSupportedContent">
						<ul class="navbar-nav mr-auto">
							<li class="nav-item ">
								<a class="nav-link text-dark" href="#">登录<span class="sr-only">(current)</span></a>
							</li>
							<li class="nav-item">
								<a class="nav-link text-danger pl-1" href="#">免费注册</a>
							</li>
						</ul>
						<form class="form-inline my-2 my-lg-0">
							<a class="nav-link  pr-4 text-dark" href="#">我的订单</a>
							<a class="nav-link  pl-2 text-dark" href="#">我的简易购</a>
						</form>
					</div>
				</div>
			</nav>
		</div>
		<!-- /导航条 -->
		<!-- 搜索 -->
		<div class="container">
			<div class="row mt-3">
				<div class="col-2 ">
					<h2 style="font-weight: bold;">简易购</h2>
				</div>
				<div class="col-7">
					<div class="input-group mb-3 ">
						<input type="text" class="form-control border-danger rounded-0" aria-label="Recipient's username"
						 aria-describedby="button-addon2">
						<div class="input-group-append">
							<button class="btn btn-danger px-5 rounded-0 text-light" type="button" id="button-addon2">搜&nbsp;索</button>
						</div>
					</div>
				</div>
				<div class="col-1"></div>
				<div class="col-2">
					<div id="cart" class="mr-0" style="border: #000000 1px solid;height: 38px; width: 120px;">
						<i class="fas fa-shopping-cart  cursor-pointer  ml-2" style="margin-top: 10px;"></i>
						<a href="#" class="text-dark" style="margin-top: 10px;text-decoration: none;">我的购物车</a>
					</div>
				</div>
			</div>
		</div>
		<!-- /搜索 -->
		<!-- 导航 -->
		<div class="container mt-2">
			<ul class="nav">
				<li class="nav-item">
					<a class="nav-link active bg-danger text-light" href="#">商品分类</a>
				</li>
				<li class="nav-item">
					<a class="nav-link text-dark" href="#">手机数码</a>
				</li>
				<li class="nav-item">
					<a class="nav-link text-dark" href="#">电脑办公</a>
				</li>
				<li class="nav-item">
					<a class="nav-link text-dark" href="#">潮流服饰</a>
				</li>
				<li class="nav-item">
					<a class="nav-link text-dark" href="#">美味食品</a>
				</li>
				<li class="nav-item">
					<a class="nav-link text-dark" href="#">装饰设计</a>
				</li>
			</ul>
			<hr style=" border:#939393 1px solid;margin-top: 0px;">
		</div>
		<!-- /导航 -->
		<!-- 表格 -->
		<div class="container">
			<table class="table table-bordered">
				<tbody>
					<tr>
						<th scope="row" style="text-align: center; "class="bg-danger text-light">商品分类</th>
						<td colspan="3">
							<a href="" class="text-dark ">手机</a>
							<a href="" class="text-dark ml-3">电脑</a>
							<a href="" class="text-dark ml-3">数码</a>
						</td>

					</tr>
					<tr>
						<th scope="row" style="text-align: center;" class="bg-danger text-light">品牌</th>
						<td colspan="3">
							<a href="" class="text-dark ">华为</a>
							<a href="" class="text-dark ml-3">小米</a>
							<a href="" class="text-dark ml-3">三星</a>
							<a href="" class="text-dark ml-3">苹果</a>
							<a href="" class="text-dark ml-3">佳能</a>
							<a href="" class="text-dark ml-3">联想</a>
							<a href="" class="text-dark ml-3">戴尔</a>
						</td>

					</tr>
					<tr>
						<th scope="row" style="text-align: center;" class="bg-danger text-light">网络制式</th>
						<td colspan="3">
							<a href="" class="text-dark ">GSM (联通/移动2G)</a>
							<a href="" class="text-dark ml-3">电信2G</a>
							<a href="" class="text-dark ml-3">电信3G</a>
							<a href="" class="text-dark ml-3">移动3G</a>
							<a href="" class="text-dark ml-3">联通3G</a>
							<a href="" class="text-dark ml-3">联通4G</a>
							<a href="" class="text-dark ml-3">移动4G</a>
						</td>

					</tr>
					<tr>
						<th scope="row" style="text-align: center;" class="bg-danger text-light">价格</th>
						<td colspan="3">
							<a href="" class="text-dark ">0-500元</a>
							<a href="" class="text-dark ml-3">500-1000元</a>
							<a href="" class="text-dark ml-3">1000-1500元</a>
							<a href="" class="text-dark ml-3">1500-2000元</a>
							<a href="" class="text-dark ml-3">2000-2500元</a>
							<a href="" class="text-dark ml-3">2500-3000元</a>
							<a href="" class="text-dark ml-3">3000元以上</a>
						</td>
					</tr>
				</tbody>
			</table>

			<!-- /表格 -->
			<!-- 卡片 -->

			<div class="row">
				<div class="col">
					<div class="card rounded-0 mt-4" style="width: 255px;">
						<img class="card-img-top" src="img/c_0001.jpg" alt="Card image cap">
						<div class="card-body">
							<div class="row">
								<div class="col-6">
									<h5 class="card-title">三星 </h5>
								</div>
								<div class="col-6">
									<scan>￥1000.00</scan>
								</div>
							</div>
							<div class="row">
								<i class="fas fa-heart mt-1 text-danger" style="margin-left: 80px;"></i>
								<a style="margin-left: 10px;" href="" class="text-dark">收藏</a>
								<i class="fas fa-shopping-cart mt-1 text-danger" style="margin-left: 25px"></i>
								<a style="margin-left: 10px;" href="" class="text-dark">购买</a>
							</div>
						</div>
					</div>
				</div>
				<div class="col">
					<div class="card rounded-0 mt-4" style="width: 255px;">
						<img class="card-img-top" src="img/c_0002.jpg" alt="Card image cap">
						<div class="card-body">
							<div class="row">
								<div class="col-6">
									<h5 class="card-title">三星 </h5>
								</div>
								<div class="col-6">
									<scan>￥1000.00</scan>
								</div>
							</div>
							<div class="row">
								<i class="fas fa-heart mt-1 text-danger" style="margin-left: 80px;"></i>
								<a style="margin-left: 10px;" href="" class="text-dark">收藏</a>
								<i class="fas fa-shopping-cart mt-1 text-danger" style="margin-left: 25px"></i>
								<a style="margin-left: 10px;" href="" class="text-dark">购买</a>
							</div>
						</div>
					</div>
				</div>
				<div class="col">
					<div class="card rounded-0 mt-4" style="width: 255px;">
						<img class="card-img-top" src="img/c_0003.jpg" alt="Card image cap">
						<div class="card-body">
							<div class="row">
								<div class="col-6">
									<h5 class="card-title">三星 </h5>
								</div>
								<div class="col-6">
									<scan>￥1000.00</scan>
								</div>
							</div>
							<div class="row">
								<i class="fas fa-heart mt-1 text-danger" style="margin-left: 80px;"></i>
								<a style="margin-left: 10px;" href="" class="text-dark">收藏</a>
								<i class="fas fa-shopping-cart mt-1 text-danger" style="margin-left: 25px"></i>
								<a style="margin-left: 10px;" href="" class="text-dark">购买</a>
							</div>
						</div>
					</div>
				</div>
				<div class="col">
					<div class="card rounded-0 mt-4" style="width: 255px;">
						<img class="card-img-top" src="img/c_0004.jpg" alt="Card image cap">
						<div class="card-body">
							<div class="row">
								<div class="col-6">
									<h5 class="card-title">三星 </h5>
								</div>
								<div class="col-6">
									<scan>￥1000.00</scan>
								</div>
							</div>
							<div class="row">
								<i class="fas fa-heart mt-1 text-danger" style="margin-left: 80px;"></i>
								<a style="margin-left: 10px;" href="" class="text-dark">收藏</a>
								<i class="fas fa-shopping-cart mt-1 text-danger" style="margin-left: 25px"></i>
								<a style="margin-left: 10px;" href="" class="text-dark">购买</a>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col">
					<div class="card rounded-0 mt-3" style="width: 255px;">
						<img class="card-img-top" src="img/c_0004.jpg" alt="Card image cap">
						<div class="card-body">
							<div class="row">
								<div class="col-6">
									<h5 class="card-title">三星 </h5>
								</div>
								<div class="col-6">
									<scan>￥1000.00</scan>
								</div>
							</div>
							<div class="row">
								<i class="fas fa-heart mt-1 text-danger" style="margin-left: 80px;"></i>
								<a style="margin-left: 10px;" href="" class="text-dark">收藏</a>
								<i class="fas fa-shopping-cart mt-1 text-danger" style="margin-left: 25px"></i>
								<a style="margin-left: 10px;" href="" class="text-dark">购买</a>
							</div>
						</div>
					</div>
				</div>
				<div class="col">
					<div class="card rounded-0 mt-3" style="width: 255px;">
						<img class="card-img-top" src="img/c_0003.jpg" alt="Card image cap">
						<div class="card-body">
							<div class="row">
								<div class="col-6">
									<h5 class="card-title">三星 </h5>
								</div>
								<div class="col-6">
									<scan>￥1000.00</scan>
								</div>
							</div>
							<div class="row">
								<i class="fas fa-heart mt-1 text-danger" style="margin-left: 80px;"></i>
								<a style="margin-left: 10px;" href="" class="text-dark">收藏</a>
								<i class="fas fa-shopping-cart mt-1 text-danger" style="margin-left: 25px"></i>
								<a style="margin-left: 10px;" href="" class="text-dark">购买</a>
							</div>
						</div>
					</div>
				</div>
				<div class="col">
					<div class="card rounded-0 mt-3 " style="width: 255px;">
						<img class="card-img-top" src="img/c_0002.jpg" alt="Card image cap">
						<div class="card-body">
							<div class="row">
								<div class="col-6">
									<h5 class="card-title">三星 </h5>
								</div>
								<div class="col-6">
									<scan>￥1000.00</scan>
								</div>
							</div>
							<div class="row">
								<i class="fas fa-heart mt-1 text-danger" style="margin-left: 80px;"></i>
								<a style="margin-left: 10px;" href="" class="text-dark">收藏</a>
								<i class="fas fa-shopping-cart mt-1 text-danger" style="margin-left: 25px"></i>
								<a style="margin-left: 10px;" href="" class="text-dark">购买</a>
							</div>
						</div>
					</div>
				</div>
				<div class="col">
					<div class="card rounded-0 mt-3" style="width: 255px;">
						<img class="card-img-top" src="img/c_0001.jpg" alt="Card image cap">
						<div class="card-body">
							<div class="row">
								<div class="col-6">
									<h5 class="card-title">三星 </h5>
								</div>
								<div class="col-6">
									<scan>￥1000.00</scan>
								</div>
							</div>
							<div class="row">
								<i class="fas fa-heart mt-1 text-danger" style="margin-left: 80px;"></i>
								<a style="margin-left: 10px;" href="" class="text-dark">收藏</a>
								<i class="fas fa-shopping-cart mt-1 text-danger" style="margin-left: 25px"></i>
								<a style="margin-left: 10px;" href="" class="text-dark">购买</a>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- /卡片 -->
			<!-- 分页 -->
			<nav aria-label="Page navigation example" style="margin-left: 500px;margin-top: 20px;">
				<ul class="pagination">
					<li class="page-item">
						<a class="page-link  text-dark" href="#" aria-label="Previous">
							<span aria-hidden="true">&laquo;</span>
							<span class="sr-only">Previous</span>
						</a>
					</li>
					<li class="page-item "><a class="page-link text-dark" href="#">1</a></li>
					<li class="page-item"><a class="page-link text-dark" href="#">2</a></li>
					<li class="page-item"><a class="page-link text-dark" href="#">3</a></li>
					<li class="page-item"><a class="page-link text-dark" href="#">4</a></li>
					<li class="page-item">
						<a class="page-link  text-dark" href="#" aria-label="Next">
							<span aria-hidden="true">&raquo;</span>
							<span class="sr-only">Next</span>
						</a>
					</li>
				</ul>
			</nav>
		</div>
		<!-- /分页 -->
		<!-- 页脚 -->
		<div class="container-fluid">
			<div class="footer bg-danger ">
				<p class="text-center text-light py-2">@HUNAU-SYB</p>
			</div>
		</div>
		<!-- Optional JavaScript -->
		<!-- jQuery first, then Popper.js, then Bootstrap JS -->
		<script src="./js/plugins/jQuery/jquery-3.3.1.slim.min.js"></script>
		<script src="./js/plugins/bootstrap/popper.min.js"></script>
		<script src="./js/plugins/bootstrap/bootstrap.min.js"></script>
	</body>
</html>
